<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>购物车</title>
	<script src="js/vue.global.js"></script>
</head>
<style>
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	html,
	body {

		width: 100%;
		min-width: 1176px;
		min-height: 1200px;
		font-size: 16px;
		margin: auto;
		background-color: #F4F6FA;
		font-weight: 400;
		font-family: Helveticsa, sans-serif;
	}

	#site-headline {
		padding-top: 2rem;
		background-image: linear-gradient(120deg, #b8daee 30%, rgb(29, 140, 252) 46%, #d2d7f8 70%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		font-size: 1.6rem;
		font-weight: 600;
		text-align: center;
		letter-spacing: .2rem;
	}

	table {
		width: 1200px;
		background-color: #fff;
		margin: 20px auto;
	}

	tr {
		margin-bottom: 10px;
	}

	td {
		padding: 10px;
		font-size: 16px;
		color: #333;
		border-bottom: 1px dashed #ddd;
	}

	.thead td {
		font-weight: 600;
	}

	.num button {
		width: 1.6rem;
		height: 1.6rem;
		color: #666;
		font-size: 1.4rem;
		text-align: center;
		line-height: 1.6rem;
		border: none;
	}

	.num input {
		height: 1.6rem;
		width: 3rem;
		text-align: center;
		color: #555;
		font-size: .9rem;
		border: 1px solid #ddd;
		position: relative;
		top: -2px;
		outline: none;
	}

	td span {
		color: #999;
		font-size: 13px;
	}

	.price {
		color: red;
		font-weight: 600;
	}

	input[type='checkbox'] {
		margin-right: 5px;
	}

	.del {
		font-weight: 600;
		color: brown;
		cursor: pointer;
	}
	button.checkout {
    margin-left: 20px;
    padding: 5px 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

button.checkout:hover {
    background-color: #45a049;
}
</style>

<body>
	<h1 id="site-headline">Vue购物车结算</h1>
	<div id="app">
		<table>
			<thead>
				<tr class="thead">
					<td><label><input type="checkbox" @click="selectAll()">全选</label></td>
					<td colspan="3" align="right">单价(元)</td>
					<td align="center">数量</td>
					<td>小计(元)</td>
					<td style="cursor: pointer;color: skyblue;">编辑</td>
				</tr>
			</thead>
			<tbody>
				<template v-for="(item, index) in shopList">
					<tr>
						<td colspan="7">
							<label>
								<input type="checkbox" v-model="item.selected" @click="selectShop(item)">
								{{ item.shop }}
							</label>
						</td>
					</tr>
					<tr v-for="(goods, i) in item.list">
						<td><input type="checkbox" v-model="goods.selected" @change="updateAllSelectedState"></td>
						<td style="width: 120px;"><img width="100%" :src="goods.img" alt="" /></td>
						<td>{{ goods.title }}</td>
						<td class="price">￥{{ goods.price }}</td>
						<td class="num">
							<button @click="decreaseQuantity(goods)">-</button>
							<input type="text" v-model.number="goods.num">
							<button @click="increaseQuantity(goods)">+</button>
						</td>
						<td class="price">￥{{ (goods.price * goods.num).toFixed(2) }}</td>
						<td><button @click="deleteSelected(goods)">删除</button></td>
					</tr>
				</template>
			</tbody>
			<tfoot>
				<tr>
					<td><label><input type="checkbox" @click="selectAll()">全选</label></td>
					<td class="del"><button @click="deleteAllSelected()">删除选中商品</button></td>
					<td>共有 {{ totalItems }} 种商品,已选择 <b>{{ selectedItemsCount }}</b> 件</td>
					<td align="right" colspan="4">
						合计： <b class="price" style="font-size: 18px;">￥{{ totalPrice.toFixed(2) }}</b>
						<button @click="checkout" style="margin-left: 20px; padding: 5px 10px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">
							结账
						</button>
					</td>
				</tr>
			</tfoot>
		</table>
	</div>
	<script src="js/shopcar.js"></script>
</body>

</html>